<!-- extend base layout -->
{% extends "base.html" %}

{% block content %}
	<br>

	<center>
	<form action="/submit" id="textform" method="post">
	    <textarea name="content" rows="4" cols="50" placeholder="Just write whatever you want to..."></textarea>
	    <br>
	    <input type="text" name="author" placeholder="Your name">
	    <input type="submit" value="Post">
	</form>
	</center>

	<br>

	<a href="{{node_address}}/mine" target="_blank"><button>Request to mine</button></a>
	<a href="/"><button>Resync</button></a>

	<div style="margin: 20px;">

    {% for post in posts %}
    <div class="post_box">
	   <div class="post_box-header">
	      <div class="post_box-options"><button class="option-btn">Reply</button></div>
	      <div style="background: rgb(0, 97, 146) none repeat scroll 0% 0%; box-shadow: rgb(0, 97, 146) 0px 0px 0px 2px;" class="post_box-avatar">{{post.author[0]}}</div>
	      <div class="name-header">{{post.author}}</div>
	      <div class="post_box-subtitle"> Posted at <i>{{readable_time(post.timestamp)}}</i></div>
	   </div>
	   <div>
	      <div class="post_box-body">
	         <p>{{post.content}}</p>
	      </div>
	   </div>
	</div>
	{% endfor %}

	<style>
		.post_box {
		    background: #fff;
		    padding: 12px 0px 0px 12px;
		    margin-top: 0px;
		    margin-bottom: 8px;
		    border-top: 1px solid #f0f0f0;
		}
		.post_box-header {
		    padding-bottom: 12px;
		}
		.post_box-avatar {
		    width: 38px;
		    height: 38px;
		    border-radius: 50%;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    color: white;
		    font-size: 22px;
		    float: left;
		    margin-right: 16px;
		    border: 1px solid #fff;
		    box-shadow: 0px 0px 0px 2px #f00;
		}
		.post_box-avatar::after {
		    content:"";
		    display:block;
		}
		.post_box-name {
		    font-weight: bold;
		}
		.post_box-subtitle {
		    color: #777;
		}
		.post_box-body {
		    margin-top: 16px;
		    margin-bottom: 8px;
		}
		.post_box-options {
		    float: right;
		}
		.option-btn {
		    background: #f8f8f8;
		    border: none;
		    color: #2c3e50;
		    padding: 7px;
		    cursor: pointer;
		    font-size: 14px;
		    margin-left: 2px;
		    margin-right: 2px;
		    outline: none;
		    height: 42px;
		}
	</style>
    </div>
{% endblock %}